<template>
  <el-card>
    <el-form :model="searchForm" label-width="100px" ref="searchFormRef" inline>
      <el-form-item label="一级分类">
        <el-select
          v-model="searchForm.category1Id"
          placeholder="一级分类"
          clearable
          @change="chageCategory1"
        >
          <el-option
            v-for="item of categoryList1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="searchForm.category2Id"
          placeholder="二级分类"
          clearable
          @change="chageCategory2"
        >
          <el-option
            v-for="item of categoryList2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="searchForm.category3Id"
          placeholder="三级分类"
          clearable
        >
          <el-option
            v-for="item of categoryList3"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 14px">
    <el-button type="primary" size="default" icon="Plus" @click="onAdd">
      新增spu
    </el-button>
    <el-table
      v-loading="loading"
      style="margin: 10px 0px"
      border
      :data="tableData"
    >
      <el-table-column
        label="序号"
        width="80px"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column
        label="SPU名称"
        prop="attrName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="SPU描述"
        prop="attrName"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template #="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="onEdit(row)"
          ></el-button>
          <el-popconfirm
            :title="`您确定要删除${row.tmName}?`"
            width="250px"
            icon="Delete"
            @confirm="onDelete(row.id)"
          >
            <template #reference>
              <el-button type="primary" size="small" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <spuAddDlg
      ref="spuAddDlgRef"
      @closeDlg="closeDlg"
      :showDlg="showDlg"
      v-if="showDlg"
      :id="rowId"
    ></spuAddDlg>
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { reqHasSpu, reqDeleteSpu } from '@/api/product/spu/spu'
import { ElMessage } from 'element-plus'
import type { SpuData, SpuList } from '@/api/product/spu/type'
import type { Data3 } from '@/api/product/attr/type'
import useCategory from '@/store/modules/category'
import spuAddDlg from './spuAddDlg.vue'

let searchForm = reactive({
  category1Id: '',
  category2Id: '',
  category3Id: '',
})
let loading = ref<boolean>(false)
const searchFormRef = ref()
let categoryList1 = ref<Data3[]>([])
let categoryList2 = ref<Data3[]>([])
let categoryList3 = ref<Data3[]>([])

let spuAddDlgRef = ref()
let showDlg = ref(false)
let rowId = ref<string>('')

let pageNo = ref<number>(1)
let limit = ref<number>(3)
let total = ref<number>(0)
let tableData = ref<SpuData[]>([])

const useCategoryStore = useCategory()

onMounted(() => {
  // initSelect()
  // getTableData()
})
const getTableData = () => {
  loading.value = true
  reqHasSpu(pageNo, limit)
    .then((res: SpuList) => {
      console.log('res: ', res)
      if (res.code == 200) {
        console.log('res: ', res)
        tableData.value = res.data || []
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const closeDlg = () => {
//   showDlg.value = false
//   getTableData()
}
const onAdd = () => {
  rowId.value = ''
  showDlg.value = true
}
const onEdit = () => {}
const onDelete = async (id: number) => {
  let result = await reqDeleteSpu(id)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    getTableData()
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败',
    })
  }
}
const initSelect = async () => {
  await useCategoryStore.getC1()
  categoryList1.value = useCategoryStore.c1List || []
  searchForm.category1Id = useCategoryStore.c1List[1].id as string
  useCategoryStore.c1Id = useCategoryStore.c1List[1].id as string
  chageCategory1()
}
const chageCategory1 = async (val?: string) => {
  await useCategoryStore.getC2()
  categoryList2.value = useCategoryStore.c2List || []
  console.log('useCategoryStore.c2List: ', useCategoryStore.c2List)

  searchForm.category2Id = val || (useCategoryStore.c2List[0].id as string)
  useCategoryStore.c2Id = val || (useCategoryStore.c2List[0].id as string)

  chageCategory2()
}

const chageCategory2 = async (val?: string) => {
  await useCategoryStore.getC3()
  categoryList3.value = useCategoryStore.c3List || []
  searchForm.category3Id = val || (useCategoryStore.c3List[0].id as string)
  useCategoryStore.c3Id = val || (useCategoryStore.c3List[0].id as string)
  // getTableData()
}
</script>
<style scoped lang="scss"></style>
